<template>
  <div :id="chartId">
  </div>
</template>


<script>
  import echarts from 'echarts'

  export default {
    name: 'bar',
    props: {
      redraw: {
        type: Boolean,
        default: true,
      },
      chartId: {
        type: String,
        required: true,
      },
      chartTitle: {
        type: String,
        required: true,
      },
      yTitle: {
        type: String,
        default: this.chartTitle,
      },
      chartColor: {
        type: Array,
        default: () => {
          return ['#295488']
        },
      },
      chartData: {
        type: Object,
        default: () => {
          return {
            chartData: {
              xData: [],
              yData: [],
            },
          }
        },
      },
    },
    watch: {
      redraw: 'drawBarChart',
      chartData: 'drawBarChart',
    },
    methods: {
      drawBarChart() {
        const chart = echarts.init(document.getElementById(this.chartId))
        const option = {
          color: this.chartColor,
          title: {
            text: this.chartTitle,
            x: '50%',
            y: '4%',
            textAlign: 'center',
            textStyle: {
              color: '#a8a8a8',
              fontSize: 12,
            },
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: this.chartData.xData,
            axisLine: {
              lineStyle: {
                color: '#a8a8a8',
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#a8a8a8',
              },
            },
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              name: this.yTitle,
              type: 'bar',
              data: this.chartData.yData,
            },
          ],
        }
        chart.setOption(option)
      },
    },
    mounted() {
      this.drawBarChart()
    },
  }
</script>


<style lang="scss">
</style>
